<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
		<meta charset="utf-8">
		<title>备用金列表</title>
	    <link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/layui.css}" />
		<script type="text/jscript" th:src="@{/plugin/layui/layui.js}" charset="UTF-8"></script>
		<script th:src="@{/plugin/vue/axios.js}" type="text/javascript" charset="utf-8"></script>
		<script th:src="@{/plugin/vue/vue.js}" type="text/javascript" charset="utf-8"></script>
		<script th:src="@{/plugin/jquery.min.js}" charset="utf-8"></script>
	</head>
	<body>
		<!--最外层容器控制位置-->
		<div id="app" class="container" style="height:500px; margin: 30px 100px;">
			<div id="" class="layui-row ">

				<!--  左边操作功能模块-->
				<div id="" class="layui-col-md12 layui-bg-gray" style="height: 500px;">
					<div id="" class="layui-row ">
						<!-- 左侧菜单框-->
						<div id="" class="layui-col-md8 " style=" height: 500px;">
							<!-- 印刷号 -->
							<!-- <div id="" class="layui-col-md12" style="border:#40AFFE 2px solid ; background-color: white; height: 70px;">
								<div id="" class="layui-col-md5" style="height: 70px; text-align: center;line-height: 70px; font-size: 20px;color: red;">
									印&nbsp;刷&nbsp;号：<input type="text" size="10" ; style="color: red;" />
								</div>

								<div id="" class="layui-col-md2 layui-bg-blue" style="height: 70px; text-align: center;line-height: 70px;font-size: 20px;">
									读取腕带
								</div>

								<div id="" class="layui-col-md5" style="height: 70px; text-align: center;line-height: 70px;font-size: 20px;">
									腕带类型：
									<select>
										<option>普通腕带</option>
										<option>vip腕带</option>
									</select>
								</div>
							</div>
							<div id="" class="layui-col-md12" style="border:#40AFFE 2px solid ; margin-top:5px;background-color:white; height: 70px;">
								<div id="" class="layui-col-md5" style="height: 70px; text-align: center;line-height: 70px; font-size: 20px;">
									电话号码：<input type="text" size="10" ;/>
								</div>
								<div id="" class="layui-col-md7" style="height: 70px; text-align: center;line-height: 70px;font-size: 20px;">
									证&nbsp;件&nbsp;号：<input type="text" size="20" ; style="color: red;" />
								</div>
							</div> -->
							<!-- 消费项目列表 -->
							<div id="" class="layui-col-md12" style="margin-top: 5px; background-color: #93D1FF;font-size: 20px; height: 30px;">
								&nbsp;&nbsp;&nbsp;<i class="layui-icon layui-icon-list" style="font-size: 20px;" ></i>备用金列表
							</div>
							<div id="" class="layui-col-md12" style="overflow-y:auto;">
								<table border="1px" bordercolor="#f2f2f2" width="100%" >
									<tr bgcolor="#007DDB">
										<td class="layui-col-md3" style="height: 30px; text-align: center; line-height: 30px;">终端编号</td>
										<td class="layui-col-md3" style="height: 30px; text-align: center; line-height: 30px;">金额</td>
										<td class="layui-col-md3" style="height: 30px; text-align: center; line-height: 30px;">现金来源</td>
										<td class="layui-col-md3" style="height: 30px; text-align: center; line-height: 30px;">操作时间</td>
									</tr>
									<tr v-for="item in listImprest">
										<td class="layui-col-md3" style="height: 30px; text-align: center; line-height: 30px;">{{item.pos.pos_name}}</td>
										<td class="layui-col-md3" style="height: 30px; text-align: center; line-height: 30px;">{{item.imprestMoney}}</td>
										<td class="layui-col-md3" style="height: 30px; text-align: center; line-height: 30px;">{{item.imprestSourceInfo.imprestSourceNameFore}}</td>
										<td class="layui-col-md3" style="height: 30px; text-align: center; line-height: 30px;">{{item.imprestTime}}</td>
									</tr>
<!--									<tr >-->
<!--										<td class="layui-col-md3" style="height: 30px; text-align: center; line-height: 30px;">售票充值点1</td>-->
<!--										<td class="layui-col-md3" style="height: 30px; text-align: center; line-height: 30px;">3000</td>-->
<!--										<td class="layui-col-md3" style="height: 30px; text-align: center; line-height: 30px;">售票充值点2</td>-->
<!--										<td class="layui-col-md3" style="height: 30px; text-align: center; line-height: 30px;">2019-12-11 12:32:33</td>-->
<!--									</tr>-->
								</table>
							</div>
						</div>

						<!-- 右侧菜单-->
						<div id="" class="layui-col-md4" style="height: 500px; ">
							<div id="" class="layui-col-md12" style="background-color: #93D1FF; height: 140px; text-align: center;margin: 5px;">
									<div id="" style="font-size: 20px;margin-top: 15px;">
										终端编号：<input type="text" v-model="listImprest[0].pos.pos_name"  value="" size="10"/>
									</div>
									<div id="" style="font-size: 20px; margin-top: 20px;">
										发放金额：<input type="text" v-model="imprestInfo['imprestMoney']" value="" size="10">
									</div>
									<div id="" style="font-size: 20px;margin-top: 15px;">
										现金来源：<select v-model="select['imprestSourceId']">
											<option v-for="select in listPosInfo" :value="select['imprestSourceId']">{{select.imprestSourceNameFore}}</option>
										</select>
										<!--现金来源：<input type="text" value="金库" size="10"/>(元)-->
									</div>
							</div>
							<div id="" class="layui-col-md12 layui-col-space5" style="margin: 5px;">
									<div id="" class="layui-col-md4" @click="addNum(500)">
										<div id="" style="text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
											<font color="white">500元</font>
										</div>
									</div>
									<div id="" class="layui-col-md4" @click="addNum(100)">
										<div id="" style="text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
											<font color="white">100元</font>
										</div>
									</div>
									<div id="" class="layui-col-md4" @click="addNum(200)">
										<div id="" style="text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
											<font color="white">200元</font>
										</div>
									</div>
									<div id="" class="layui-col-md4" @click="addNum(7)">
										<div id="" style="font-size: 25px; text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
											<font color="white">7</font>
										</div>
									</div>
									<div id="" class="layui-col-md4" @click="addNum(8)">
										<div id="" style="font-size: 25px;text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
											<font color="white">8</font>
										</div>
									</div>
									<div id="" class="layui-col-md4" @click="addNum(9)" >
										<div id="" style="font-size: 25px;text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
											<font color="white">9</font>
										</div>
									</div>
									<div id="" class="layui-col-md4" @click="addNum(4)" >
										<div id="" style="font-size: 25px; text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
											<font color="white">4</font>
										</div>
									</div>
									<div id="" class="layui-col-md4" @click="addNum(5)">
										<div id="" style="font-size: 25px;text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
											<font color="white">5</font>
										</div>
									</div>
									<div id="" class="layui-col-md4" @click="addNum(6)">
										<div id="" style="font-size: 25px;text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
											<font color="white">6</font>
										</div>
									</div>
									<div id="" class="numberbtn layui-col-md4" @click="addNum(1)">
										<div id="" style="font-size: 25px; text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
											<font color="white">1</font>
										</div>
									</div>
									<div id="" class="numberbtn layui-col-md4" @click="addNum(2)">
										<div id="" style="font-size: 25px;text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
											<font color="white">2</font>
										</div>
									</div>
									<div id="" class="numberbtn layui-col-md4" @click="addNum(3)">
										<div id="" style="font-size: 25px;text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
											<font color="white">3</font>
										</div>
									</div>
								<div id="" class="layui-col-md4" @click="addNum(-1)" >
									<div id="" style="font-size: 25px; text-align: center;line-height: 50px; background-color: #01AAED;height: 50px;">
										<font color="white">退格</font>
									</div>
								</div>
								<div id="" class="layui-col-md4" @click="addNum(0)">
									<div id="" style="font-size: 25px;text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
										<font color="white">0</font>
									</div>
								</div>
								<div id="" class="layui-col-md4" @click="addNum(10)">
									<div id="" style="font-size: 25px;text-align: center;line-height: 50px; background-color: orange;height: 50px;">
										<font color="white">重置</font>
									</div>
								</div>
								<div id="" class="layui-col-md6" >
									<div @click="insertInfo"  style="font-size: 25px; text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
										<font color="white">确定</font></font>
									</div>
								</div>
								<div id="" class="layui-col-md6 " >
									<div id="" style="font-size: 25px;text-align: center;line-height: 50px; background-color: #FF0000;height: 50px;">
										<font color="white">关闭</font>
									</div>
								</div>
								
								</table>
							</div>
						</div>


					</div>
				</div>
			<!-- 页脚-->
			<div class="layui-row layui-bg-gray" style="text-align: center;">
				<div id="mytime" class="layui-col-md3" style="border: lightblue 1px solid;height: 30px;"> </div>
				<div class="layui-col-md3" style="border: lightblue 1px solid;height: 30px;"> 操作用户：yanhui</div>
				<div id="mytime2" class="layui-col-md3" style="border: lightblue 1px solid;height: 30px;"> </div>
				<div class="layui-col-md3" style="border: lightblue 1px solid;height: 30px;"> 某某游乐园</div>
			</div>
		</div>

		</div>
		<script>
			// 时间展示
			function showTime() {
				var	nowtime = new Date();
				var	year = nowtime.getFullYear();
				var	month = nowtime.getMonth() + 1;
				var	date = nowtime.getDate();
				$("#mytime").html(year + "年" + month + "月" + date +"日");
				$("#mytime2").html(""+nowtime.toLocaleTimeString());
				$("#mytime3").val(year + "-" + month + "-" + date +" " +nowtime.toLocaleTimeString());

			};
			// jQuery加载执行时间展示
			$(function(){
				setInterval("showTime()", 1000);
			})
			var app = new Vue({
				el:"#app",
				data:{
					listImprest:[],
					imprestInfo:{
						imprestId: 0,
						imprestMoney: 0.00,
						imprestSourceFore: 0,
						imprestSourcePosIdFore: 0,
						imprestTime: "",
					},
					select:{},
					listPosInfo:[],
					num:"",
					oldNum:[],
					countN:-1,
					newNum:[],
				},
				//vue生命周期函数（mounted/create）,实现加载时运行
				mounted:function(){
					this.listAll();
					this.listPos();
				},
				methods:{
					addNum:function(n){
						/*
						*   -1   0  1
						*   null 7  8
						*        ^
						*
						*   借助C语言指针思想：
						*      当拥有 第一个数据（eg:7）时，指针右移一位（+1，变为0），指向7，
						*      当拥有 第二个数据（eg:8）时，指针右移一位（+1，变为1），指针指向8，
						* */
						var that = this;
						if(n === 10){
							that.oldNum = this.newNum;
							that.num = "";
							that.imprestInfo.imprestMoney ="";
							that.countN = -1;
							return;
						};
						if(n === -1){ // 参数n=-1：代表退格操作
							if(this.countN>0){ // 若指针指向 1 和其之后数据（例如2，3，4……）
								that.countN = this.countN-1; // 退格，将回到上次指针位置
								//console.log("退格前:"+this.countN)
								that.imprestInfo.imprestMoney = this.oldNum[this.countN];
								//console.log("退格:"+this.countN)
							}else{ // 若指针指向 0 和之前数据（例如-1，-2，-3……），退格，将指向空值状态
								that.oldNum = this.newNum;
								that.num = "";
								that.imprestInfo.imprestMoney ="";
								that.countN = -1;
								//console.log("全清:"+this.countN)
							}
							return
						};
						if(n===500){that.imprestInfo.imprestMoney=n;that.oldNum[this.countN]=this.num;that.countN++;return;};
						if(n===200){that.imprestInfo.imprestMoney=n;that.oldNum[this.countN]=this.num;that.countN++;return;};
						if(n===100){that.imprestInfo.imprestMoney=n;that.oldNum[this.countN]=this.num;that.countN++;return;};
						that.num += n+""; // 生成新数据
						that.countN = this.countN+1; // 当指针右移一步（+1），指向该新数据
						//console.log("生成数据后，添加数组前："+this.countN)
						that.imprestInfo.imprestMoney = Number(this.num); // 让备用金=新数据
						that.oldNum[this.countN] = this.num; // 存入数据数组，方便退格操作
					},
					listPos:function(){
						var that = this;
						axios.get("http://localhost:8080/imprestSourceInfo/selectAll")
								.then((resp)=>{
									that.listPosInfo = resp.data.data;
								});
					},
					listAll:function(){
						var that = this;
						axios.get("http://localhost:8080/imprestInfo/selectAll")
								.then((resp)=>{
									that.listImprest = resp.data;
								});
					},
					insertInfo:function () {
						const data = new FormData();
						data.append("imprestMoney",this.imprestInfo['imprestMoney']);
						data.append("imprestSourceFore",this.select['imprestSourceId']);
						data.append("imprestSourcePosIdFore",this.listImprest[0].imprestSourcePosIdFore);
						axios.post("http://localhost:8080/imprestInfo/insert",data).then(()=>{
							this.listAll();
						})
					}
				}
			})

		</script>
	</body>
</html>
